<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: fuchsia;">包厢111</span>
        <el-form label-position="left" :inline="true" :model="roomData_111" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_111.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
            <el-input readonly v-model="roomData_111.consumer" placeholder="    ">
            </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_111.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_111.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="roomData_111.roomStatus === '娱乐中'" size = "large" round @click=openDialog(roomData_111)>记账</el-button>
          <el-button v-if="roomData_111.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="roomData_111.roomStatus === '已预定'" size = "large" round @click=enterOrder(roomData_111)>进场</el-button>
          <el-button v-if="roomData_111.roomStatus === '已预定'" size = "large" round @click=cancelOrder(roomData_111)>取消预定</el-button>
          <el-button v-if="roomData_111.roomStatus === '空置中'|| !roomData_111.roomStatus" size = "large" round @click=openDialogBook(roomData_111)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: #ff2f3b; ">大厅3号台</span>
        <el-form label-position="left" :inline="true" :model="lobbyData_3" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_3.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_3.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_3.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_3.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="lobbyData_3.roomStatus === '娱乐中'" size = "large" round @click=openDialog(lobbyData_3)>记账</el-button>
          <el-button v-if="lobbyData_3.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="lobbyData_3.roomStatus === '已预定'" size = "large" round @click=enterOrder(lobbyData_3)>进场</el-button>
          <el-button v-if="lobbyData_3.roomStatus === '已预定'" size = "large" round @click=cancelOrder(lobbyData_3)>取消预定</el-button>
          <el-button v-if="lobbyData_3.roomStatus === '空置中'|| !lobbyData_3.roomStatus" size = "large" round @click=openDialogBook(lobbyData_3)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: #ff2f3b; ">大厅5号台</span>
        <el-form label-position="left" :inline="true" :model="lobbyData_5" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_5.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_5.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_5.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_5.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="lobbyData_5.roomStatus === '娱乐中'" size = "large" round @click=openDialog(lobbyData_5)>记账</el-button>
          <el-button v-if="lobbyData_5.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="lobbyData_5.roomStatus === '已预定'" size = "large" round @click=enterOrder(lobbyData_5)>进场</el-button>
          <el-button v-if="lobbyData_5.roomStatus === '已预定'" size = "large" round @click=cancelOrder(lobbyData_5)>取消预定</el-button>
          <el-button v-if="lobbyData_5.roomStatus === '空置中'|| !lobbyData_5.roomStatus" size = "large" round @click=openDialogBook(lobbyData_5)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: fuchsia; ">包厢888</span>
        <el-form label-position="left" :inline="true" :model="roomData_888" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_888.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_888.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_888.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_888.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="roomData_888.roomStatus === '娱乐中'" size = "large" round @click=openDialog(roomData_888)>记账</el-button>
          <el-button v-if="roomData_888.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="roomData_888.roomStatus === '已预定'" size = "large" round @click=enterOrder(roomData_888)>进场</el-button>
          <el-button v-if="roomData_888.roomStatus === '已预定'" size = "large" round @click=cancelOrder(roomData_888)>取消预定</el-button>
          <el-button v-if="roomData_888.roomStatus === '空置中'|| !roomData_888.roomStatus" size = "large" round @click=openDialogBook(roomData_888)>预定</el-button>
        </el-form>
      </div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: fuchsia; ">包厢222</span>
        <el-form label-position="left" :inline="true" :model="roomData_222" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_222.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_222.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_222.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_222.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="roomData_222.roomStatus === '娱乐中'" size = "large" round @click=openDialog(roomData_222)>记账</el-button>
          <el-button v-if="roomData_222.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="roomData_222.roomStatus === '已预定'" size = "large" round @click=enterOrder(roomData_222)>进场</el-button>
          <el-button v-if="roomData_222.roomStatus === '已预定'" size = "large" round @click=cancelOrder(roomData_222)>取消预定</el-button>
          <el-button v-if="roomData_222.roomStatus === '空置中'|| !roomData_222.roomStatus" size = "large" round @click=openDialogBook(roomData_222)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: #ff2f3b; ">大厅2号台</span>
        <el-form label-position="left" :inline="true" :model="lobbyData_2" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_2.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_2.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_2.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_2.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="lobbyData_2.roomStatus === '娱乐中'" size = "large" round @click=openDialog(lobbyData_2)>记账</el-button>
          <el-button v-if="lobbyData_2.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="lobbyData_2.roomStatus === '已预定'" size = "large" round @click=enterOrder(lobbyData_2)>进场</el-button>
          <el-button v-if="lobbyData_2.roomStatus === '已预定'" size = "large" round @click=cancelOrder(lobbyData_2)>取消预定</el-button>
          <el-button v-if="lobbyData_2.roomStatus === '空置中'|| !lobbyData_2.roomStatus" size = "large" round @click=openDialogBook(lobbyData_2)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: #ff2f3b; ">大厅6号台</span>
        <el-form label-position="left" :inline="true" :model="lobbyData_6" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_6.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_6.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_6.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_6.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="lobbyData_6.roomStatus === '娱乐中'" size = "large" round @click=openDialog(lobbyData_6)>记账</el-button>
          <el-button v-if="lobbyData_6.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="lobbyData_6.roomStatus === '已预定'" size = "large" round @click=enterOrder(lobbyData_6)>进场</el-button>
          <el-button v-if="lobbyData_6.roomStatus === '已预定'" size = "large" round @click=cancelOrder(lobbyData_6)>取消预定</el-button>
          <el-button v-if="lobbyData_6.roomStatus === '空置中'|| !lobbyData_6.roomStatus" size = "large" round @click=openDialogBook(lobbyData_6)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: fuchsia; ">包厢777</span>
        <el-form label-position="left" :inline="true" :model="roomData_777" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_777.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_777.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_777.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_777.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="roomData_777.roomStatus === '娱乐中'" size = "large" round @click=openDialog(roomData_777)>记账</el-button>
          <el-button v-if="roomData_777.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="roomData_777.roomStatus === '已预定'" size = "large" round @click=enterOrder(roomData_777)>进场</el-button>
          <el-button v-if="roomData_777.roomStatus === '已预定'" size = "large" round @click=cancelOrder(roomData_777)>取消预定</el-button>
          <el-button v-if="roomData_777.roomStatus === '空置中'|| !roomData_777.roomStatus" size = "large" round @click=openDialogBook(roomData_777)>预定</el-button>
        </el-form>
      </div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: fuchsia; ">包厢666</span>
        <el-form label-position="left" :inline="true" :model="roomData_666" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_666.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_666.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_666.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="roomData_666.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="roomData_666.roomStatus === '娱乐中'" size = "large" round @click=openDialog(roomData_666)>记账</el-button>
          <el-button v-if="roomData_666.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="roomData_666.roomStatus === '已预定'" size = "large" round @click=enterOrder(roomData_666)>进场</el-button>
          <el-button v-if="roomData_666.roomStatus === '已预定'" size = "large" round @click=cancelOrder(roomData_666)>取消预定</el-button>
          <el-button v-if="roomData_666.roomStatus === '空置中'|| !roomData_666.roomStatus" size = "large" round @click=openDialogBook(roomData_666)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span style="font-size: xx-large; color: #ff2f3b; ">大厅1号台</span>
        <el-form label-position="left" :inline="true" :model="lobbyData_1" class="demo-form-inline" size="mini">
          <el-form-item label="包厢状态" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_1.roomStatus" placeholder="空置中"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="客人姓名" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_1.consumer" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系方式" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_1.contact" placeholder="    "></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="累计消费" label-width="70px">
            <el-col :span="16">
              <el-input readonly v-model="lobbyData_1.moneyNow" placeholder="    ">
              </el-input>
            </el-col>
          </el-form-item>
          <el-button v-if="lobbyData_1.roomStatus === '娱乐中'" size = "large" round @click=openDialog(lobbyData_1)>记账</el-button>
          <el-button v-if="lobbyData_1.roomStatus === '娱乐中'" size = "large" round>结账</el-button>
          <el-button v-if="lobbyData_1.roomStatus === '已预定'" size = "large" round @click=enterOrder(lobbyData_1)>进场</el-button>
          <el-button v-if="lobbyData_1.roomStatus === '已预定'" size = "large" round @click=cancelOrder(lobbyData_1)>取消预定</el-button>
          <el-button v-if="lobbyData_1.roomStatus === '空置中'|| !lobbyData_1.roomStatus" size = "large" round @click=openDialogBook(lobbyData_1)>预定</el-button>
        </el-form>
      </div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">
        <el-row>
          <span style="font-size: xx-large; color: #462cff; font-style: italic" v-bind:interval="1000">{{currentTimeFormat}}</span>
        </el-row>
        <el-row>
          <span style="font-size: xx-large; color: #462cff; font-style: italic" v-bind:interval="1000">{{roomsAndLobbyInformationSearch.orderSession}}</span>
          <el-select v-model="roomsAndLobbyInformationSearch.orderSession" placeholder="请选择" @change="getRoomsAndLobbyInformation(roomsAndLobbyInformationSearch)">
            <el-option
              v-for="item in businessSessions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-row>

      </div></el-col>
    </el-row>
<!--    查看包厢详情/点单页面-->
    <el-dialog
    title="包厢详情"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-table :data="subOrderList">
      <el-table-column property="productName" label="名称" width="150"></el-table-column>
      <el-table-column property="quantity" label="数量" width="200"></el-table-column>
      <el-table-column property="createTime" label="时间"></el-table-column>
      <el-table-column property="consumer" label="下单人"></el-table-column>
    </el-table>
    <span><br>新 增 商 品 ：<br><br></span>
    <el-form :inline="true" :model="newSubOrder" class="demo-form-inline" :rules="createSubOrderRules" :ref="newSubOrder">
      <el-form-item label="商品名" prop="productId">
        <el-select v-model="newSubOrder.productId" placeholder="请选择" clearable>
          <el-option
            v-for="item in productList"
            :key="item.productId"
            :label="item.productName"
            :value="item.productId">
            <span style="float: left">{{ item.productName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number  v-model="newSubOrder.quantity" @change="handleChange"  label="输入数量" ></el-input-number>
      </el-form-item>
      <el-form-item label="下单人">
        <el-input v-model="newSubOrder.consumer" placeholder="下单人"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click= createNewSubOrder(newSubOrder)>确 定</el-button>
  </span>
  </el-dialog>

<!--预定包厢的界面-->
    <el-dialog
      title="包厢预定"
      :visible.sync="dialogVisibleBook"
      width="30%"
      :before-close="handleCloseBook">
      <span><br>预 定 信 息 ：<br><br></span>
      <el-form :inline="true" :model="newKtvOrder" class="demo-form-inline" :rules="createKtvOrderRules" :ref="newKtvOrder" label-position="right" label-width="80px">
        <el-form-item label="场次" prop="orderSession">
          <el-input
            v-model="newKtvOrder.orderSession"
            placeholder="请选择预定场次"
            clearable
          />
        </el-form-item>
        <el-form-item label="订单主体id" prop="mainProductId" v-show = false>
          <el-input
            v-model="newKtvOrder.mainProductId"
            placeholder="请输入订单主体id"
            clearable
          />
        </el-form-item>
        <el-form-item label="包厢/大厅" prop="mainProductName">
          <el-input
            v-model="newKtvOrder.mainProductName"
            placeholder="请选择大厅/包厢"
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="谁订的" prop="bookingMan">
          <el-input
            v-model="newKtvOrder.bookingMan"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="bookingManContact">
          <el-input
            v-model="newKtvOrder.bookingManContact"
            placeholder="请输入电话号码"
            clearable
          />
        </el-form-item>
        <el-form-item label="何时订的" prop="bookingTime">
          <el-date-picker clearable
                          v-model="newKtvOrder.bookingTime"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="何时来" prop="enterTimeEstimate">
          <el-date-picker clearable
                          v-model="newKtvOrder.enterTimeEstimate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择预计时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计人数" prop="peopleAmountEstimate">
          <el-input
            v-model="newKtvOrder.peopleAmountEstimate"
            placeholder="请输入人数"
            clearable
          />
        </el-form-item>
        <el-form-item label="谁做东" prop="consumer">
          <el-input
            v-model="newKtvOrder.consumer"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="consumerContact">
          <el-input
            v-model="newKtvOrder.consumerContact"
            placeholder="请输入电话"
            clearable
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
      <el-button @click="dialogVisible = false" >取 消</el-button>
      <el-button type="primary" @click= createNewOrder(newKtvOrder) >确 定</el-button>
    </el-dialog>
  </div>
</template>
<script>
  import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/ktv/order";
  import { allProduct, listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/ktv/product";
  import { listSubOrder, getSubOrder, delSubOrder, addSubOrder, updateSubOrder } from "@/api/ktv/subOrder";
  import {roomsAndLobbyInformation, getSubOrderListByOrder} from "@/api/ktv/centerPanel"
  export default {
    components: {},
    props: [],
    data() {
      var validateProductId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('商品不能为空'));
        }else {
          // if (this.newSubOrder.productId !== '') {
          //   this.$refs.newSubOrder.validateField('productId');
          // }
          callback();
        }
      }
      var validateProductQuantity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('数量不能为空'));
        }else {
          // if (this.newSubOrder.quantity !== '') {
          //   this.$refs.newSubOrder.validateField('quantity');
          // }
          callback();
        }
      }
      var validateOrderSession = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('预定场次必填'));
        }else {
          callback();
        }
      }
      var validateMainProductName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('包厢必填'));
        }else {
          callback();
        }
      }
      return {
      formData: {},
        rules: {},
        currentTimeFormat: "xxxx-xx-xx xx-xx-xx",
        roomsAndLobbyInformationSearch:{
          orderSession:""
        },
        businessSessions:[
          "2023/3/1下午场",
          "2023/3/1晚上场",
          "2023/3/2下午场",
          "2023/3/2晚上场",
          "2023/3/3下午场",
          "2023/3/5下午场",
          "2023/3/5晚上场"
        ],

        dialogVisible: false,
        dialogVisibleBook: false,
        subOrderList: [{
          productName: '雪花（件）',
          quantity: '1',
          createTime: '2016-05-02 12:20',
          consumer: '王小虎'
        }],
        productList: [],
        newSubOrder:{
          orderId: '',
          productId: '',
          quantity: '',
          consumer: ''
        },
        newKtvOrder: {
          orderSession: '',
          mainProductName: ''
        },
        roomData_111:{},
        roomData_222:{},
        roomData_666:{},
        roomData_777:{},
        roomData_888:{},
        lobbyData_1:{},
        lobbyData_2:{},
        lobbyData_3:{},
        lobbyData_5:{},
        lobbyData_6:{},
        allRoomAndLobbyData:[],
        createSubOrderRules:{
          productId : [
            {validator : validateProductId, trigger: 'blur'}
          ],
          quantity : [
            {validator : validateProductQuantity, trigger: 'blur'}
          ]
        },
        createKtvOrderRules:{
          orderSession : [
            {validator : validateOrderSession, trigger: 'blur'}
          ],
          mainProductName : [
            {validator : validateMainProductName, trigger: 'blur'}
          ]
        },

      }
    },
    computed: {

    },
    watch: {

    },
    created() {
      setInterval(() => {
        const currentTime = new Date();
        const month = currentTime.getMonth() + 1;
        this.currentTimeFormat = currentTime.getFullYear() + "年" +  month+ "月" + currentTime.getDate()+ "日    " + currentTime.getHours()+ "点" + currentTime.getUTCMinutes()+ "分" + currentTime.getUTCSeconds() + "秒"
      }, 1000)

      const currentTime = new Date();
      const month = currentTime.getMonth() + 1;
      const sessionYearMonthDay = currentTime.getFullYear() + "/" +  month+ "/" + currentTime.getDate();
      const session = currentTime.getHours()>=19?"晚上场":"下午场";
      this.roomsAndLobbyInformationSearch.orderSession =sessionYearMonthDay + session;

      setInterval(() => {
        const currentTime = new Date();
        const month = currentTime.getMonth() + 1
        const sessionYearMonthDay = currentTime.getFullYear() + "/" +  month+ "/" + currentTime.getDate();
        const session = currentTime.getHours()>=19?"晚上场":"下午场";
        this.roomsAndLobbyInformationSearch.orderSession =sessionYearMonthDay + session;
      }, 1800000)
      this.getProductList();

    // 获取所有大厅和包厢的情况
      this.getRoomsAndLobbyInformation(this.roomsAndLobbyInformationSearch);

    },
    mounted() {

    },
    methods: {
      getRoomsAndLobbyInformation(roomsAndLobbyInformationSearch){
        roomsAndLobbyInformation(roomsAndLobbyInformationSearch).then(response =>{
          this.roomData_111={mainProductName:"111包厢"},
          this.roomData_222={mainProductName:"222包厢"},
          this.roomData_666={mainProductName:"666包厢"},
          this.roomData_777={mainProductName:"777包厢"},
          this.roomData_888={mainProductName:"888包厢"},
          this.lobbyData_1={mainProductName:"大厅1号台"},
          this.lobbyData_2={mainProductName:"大厅2号台"},
          this.lobbyData_3={mainProductName:"大厅3号台"},
          this.lobbyData_5={mainProductName:"大厅5号台"},
          this.lobbyData_6={mainProductName:"大厅6号台"},
          this.allRoomAndLobbyData = response;
          const allRoomAndLobbyData = response;
          for(var roomOrLobbyData in allRoomAndLobbyData){
            console.log(allRoomAndLobbyData[roomOrLobbyData].mainProductName)
            switch (allRoomAndLobbyData[roomOrLobbyData].mainProductName) {
              case '111包厢' :
                this.roomData_111 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '666包厢' :
                this.roomData_666 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '222包厢' :
                this.roomData_222 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '777包厢' :
                this.roomData_777 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '888包厢' :
                this.roomData_888 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '大厅1号台' :
                this.lobbyData_1 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '大厅2号台' :
                this.lobbyData_2 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '大厅3号台' :
                this.lobbyData_3 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '大厅5号台' :
                this.lobbyData_5 = allRoomAndLobbyData[roomOrLobbyData];
                break
              case '大厅6号台' :
                this.lobbyData_6 = allRoomAndLobbyData[roomOrLobbyData];
                break
            }
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
           this.newSubOrder = {};

            done();
          })
          .catch(_ => {});
      },
      handleCloseBook(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      openDialog(roomOrLobbyData) {
        this.dialogVisible = true;
        this.newSubOrder.orderId = roomOrLobbyData.orderId;
        this.subOrderList = roomOrLobbyData.ktvSubOrders;
      },
      openDialogBook(roomOrLobbyData) {
        this.dialogVisibleBook = true;
        this.newKtvOrder.mainProductName = roomOrLobbyData.mainProductName;
      },
      handleChange(value) {
        console.log(value);
      },
      /** 查询商品管理列表 */
      getProductList() {
        this.loading = true;
        allProduct().then(response => {
          this.productList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      createNewSubOrder(newSubOrder) {
        // this.dialogVisible = false;
        this.$refs[newSubOrder].validate((valid) => {
          if (valid) {
            // 发送新增请求
            addSubOrder(newSubOrder).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.newSubOrder = {};
              window.location.reload()
            });
          } else {
            console.log('error submit!!');
            this.newSubOrder = {};
            // window.location.reload()
            return false;
          }
        })
      },
      createNewOrder(newKtvOrder) {
        this.$refs[newKtvOrder].validate((valid) => {
          if (valid) {
            // 发送新增请求
            newKtvOrder.orderStatus = '已预定';
            addOrder(newKtvOrder).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.newKtvOrder = {};
              window.location.reload()
            });
          } else {
            console.log('error submit!!');
            this.newKtvOrder = {};
            // window.location.reload()
            return false;
          }
        })
      },
      cancelOrder(roomAndLobbyData){
        const orderId = roomAndLobbyData.orderId
        this.$modal.confirm('确定取消预定？').then(function() {
          return delOrder(orderId);
        }).then(() => {
          this.$modal.msgSuccess("删除成功");
          window.location.reload()
        }).catch(() => {});
      },
      enterOrder(roomAndLobbyData){
        const orderId = roomAndLobbyData.orderId;
        this.$modal.confirm('确定进场？').then(function() {
          const orderStatusChanged = {
            orderId: orderId,
            orderStatus: '娱乐中',
            id: roomAndLobbyData.id
          };
          return updateOrder(orderStatusChanged);
        }).then(() => {
          this.$modal.msgSuccess("已进场，开始娱乐");
          window.location.reload()
        }).catch(() => {});
      },
    }
  }

</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 236px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
